<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ideal_viewport</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
ideal_viewport

理想视口,即完全和手机的屏幕重叠等大的这么一个视口(注意这三个视口概念都是手机端的,尤其是理想视口,我们说的理想是针对手机端理想来说),

我们期望 让布局视口等于视觉视口 这就是理想视口的理想

理想视口的单位是 DP (device pixel)

DP x DPR 的乘积 即是对应的物理像素 也就是 有屏幕商品的介绍上写的什么1920(物理像素)x1080(物理像素)呀什么的
<script>
    const ideal_viewport_width = window.screen.width;
    console.log('window.screen.width,理想视口宽度',ideal_viewport_width);

    const physical_width_px = ideal_viewport_width * window.devicePixelRatio;
    console.log('屏幕的物理像素宽度(ideal_viewport_width * window.devicePixelRatio):', physical_width_px);
</script>
</body>
</html>
